<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <ul>
        {% for article in articles %}
            <li>{{ article.title }}</li>
        {% endfor %}
        <ul class="pagination">
{#             上一页#}
            {% if page_obj.has_previous %}
                <li><a href="{% url 'front5:article_list' %}?p={{ page_obj.previous_page_number }}">上一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}

{#             中间的页码#}
            {% for page in paginator.page_range %}
                {% if page == page_obj.number %}
                    <li class="active"><a href="javascript:void(0);">{{ page }}</a></li>
                {% else %}
                    <li><a href="{% url 'front5:article_list' %}?p={{ page }}">{{ page }}</a></li>
                {% endif %}
            {% endfor %}

{#             下一页#}
            {% if page_obj.has_next %}
                <li><a href="{% url 'front5:article_list' %}?p={{ page_obj.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
            {% endif %}

        </ul>
    </ul>
</body>
</html>